export const lazyLoaded1 = () => {
  return {
    "App.vue": `

      

      

      <template>
      <div
        class="content"
      >
        <div style="height:900px;width:100%">
          <h1 style="color:#FFF;text-align:center">滑动体验懒加载图片案例</h1>
        </div>
      <lazyLoaded1 style="height:300px;width:100%">
        <image1 />
        </lazyLoaded1>
      </div>
    </template>
    
    <script setup>
    import { ref, reactive, nextTick, onMounted, watch } from "vue";
    import lazyLoaded1 from "./lazyLoaded1.vue";
    import image1 from "./image1.vue";
    
    onMounted(() => {
    });
    </script>
    
    <style scoped >
  .content{
        width: 100%;
        padding-top:100px;
        background:#042C67;
        overflow-y: auto;
        height: 492px; 
  }
    </style>
      
      
      
      `,
    "src/image1.vue": `
      <template>
        <img class="image" src="/vue.example/echarts/FunnelPlot2.png" />
    </template>
    
    <script setup>
    import { ref, reactive, nextTick, onMounted, watch } from "vue";
    onMounted(() => {});
 
    </script>
    
    <style scoped>
    .image{
      width: 100%;
      height: 100%;
    }
    </style>
    
      
      `,
    "src/lazyLoaded1.vue": `
    <template>
    <div  class="contentLazy" ref="lazyLoaded">
          <slot v-if="show"></slot>
    
          <!-- 蒙层 加载动画 -->
           <div class="loadingBox" v-if="show&&loading">
            <div class="loading">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
           </div>
        </div>
    </template>
    
    <script setup>
    import { ref, reactive, nextTick, onMounted, watch } from "vue";
    onMounted(() => {});
    const show = ref(false);
    const lazyLoaded = ref();
    const props = defineProps({
      // 定义props
      loading: {
        type: Boolean,
        default: false,
      },
    });
    // 定义回调函数
    const callback = (entries, observer) => {
      entries.forEach((entry) => {
        // entry 对象包含了目标元素的信息
        if (entry.isIntersecting) {
          // 如果元素进入了视口，则执行相应操作
        //   console.log("如果元素进入了视口，则执行相应操作");
          show.value = true;
           observer.unobserve(entry.target);
          // 在这里执行比如加载图片、动画开始等操作
        } else {
          // 如果元素离开了视口，也可以执行相应操作
        //   console.log("如果元素离开了视口，也可以执行相应操作");
        }
      });
    };
    
    // 定义配置对象
    const options = {
      root: null, // 默认值，表示相对于视口计算交叉状态
      rootMargin: "0px", // 可以添加额外的外边距来扩大或缩小根元素的边缘
      threshold: 0.5, // 数组形式的阈值，元素至少有多少比例在视口内时触发回调
      // 例如：[0, 0.25, 0.5, 1] 表示从0%到100%都会触发回调
    };
    
    // 创建 IntersectionObserver 实例
    const observer = new IntersectionObserver(callback, options);
    onMounted(() => {
      nextTick(() => {
        observer.observe(lazyLoaded.value);
      });
    });
    </script>
    
    <style scoped>
    .contentLazy {
      /* width: 100%;
      height: 100%; */
      position: relative;
    }
    .loadingBox{
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         z-index: 99999999;
         background-color: #00175A;
    }
         /* 设置位置 */
            .loading {
                position: absolute;
                /* 居中 */
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                /* 高度 */
                height: 40px;
                /* 弹性布局 */
                display: flex;
                /* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */
                align-items: center;
            }
    
            /* 小竖条 */
            .item {
                height: 50px;
                width: 5px;
                background: #D3E4FE;
                /* 加margin，使竖条之间有空隙 */
                margin: 0px 3px;
                /* 圆角 */
                border-radius: 10px;
                /* 动画：名称、时间、循环 */
                animation: loading 1s infinite;
            }
    
            /* 设置动画 */
            @keyframes loading {
                0% {
                    height: 0px;
                }
    
                50% {
                    height: 50px;
                }
    
                100% {
                    height: 0px;
                }
            }
    
            /* 为每一个竖条设置延时 */
            .item:nth-child(2) {
                animation-delay: 0.1s;
            }
    
            .item:nth-child(3) {
                animation-delay: 0.2s;
            }
    
            .item:nth-child(4) {
                animation-delay: 0.3s;
            }
    
            .item:nth-child(5) {
                animation-delay: 0.4s;
            }
    
            .item:nth-child(6) {
                animation-delay: 0.5s;
            }
    
            .item:nth-child(7) {
                animation-delay: 0.6s;
            }
    
            .item:nth-child(8) {
                animation-delay: 0.7s;
            }
    </style>
    
      
      `,
  };
};
